<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

    /*.axis path, .axis line {*/
      /*fill: none;*/
      /*stroke: #000;*/
      /*shape-rendering: crispEdges;*/
    /*}*/

    /*#circle circle {*/
      /*fill: none;*/
      /*pointer-events: all;*/
    /*}*/

    /*.group path {*/
      /*fill-opacity: .5;*/
    /*}*/

    /*path.chord {*/
      /*stroke: #f00;*/
      /*stroke-width: .25px;*/
    /*}*/

    #circle:hover path.fade {
      display: none;
    }

  </style>
</head>
<body>
<script src="lib/js/d3.v3.min.js" charset="utf-8"></script>
<script src="lib/js/queue.v1.min.js"></script>
<div id="idc" style="height: 600px; width: 500px"></div>
<script>


  function getColors () {
    return ["#E41A1C", "#FFFF33", "#FF7F00", "#984EA3", "#377EB8", "#4DAF4A", "#F781BF", "#A65628", "#999999"];
  }

  var rect = d3.select('#idc').node().getBoundingClientRect();
  let id = '';
  let width = 720, height = 720,
    outerRadius = Math.min(width, height) / 2 - 10,
    innerRadius = outerRadius - 24;


  let formatPercent = d3.format(".1%");

  let arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

  let layout = d3.layout.chord()
    .padding(.04)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);

  let path = d3.svg.chord()
    .radius(innerRadius);

  let svg = d3.select("#idc").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("id", "circle")
    .style('font', '15px sans-serif')
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  svg.append("circle")
    .attr("r", outerRadius)
    .style('fill', 'none')
    .style('pointer-events', 'all');

  queue()
    .defer(d3.csv, "https://bost.ocks.org/mike/uberdata/cities.csv")
    .defer(d3.json, "https://bost.ocks.org/mike/uberdata/matrix.json")
    .await(ready);

  function netToMatrix (graph) {
    let matrix = graph.nodes.map(() => graph.nodes.map(() => 0));
    // console.log(matrix);
    graph.links.forEach(function (ln) {
      // console.log(ln);
      matrix[ln.source][ln.target] = ln.value || 1;
      matrix[ln.target][ln.source] = ln.value || 1;
    });
    return matrix;
  }

  function ready(error, cities, matrix) {
    if (error) throw error;
    // console.log(matrix);

    let graph = {
      nodes: [{name: '成都', category: 0}, {name: '上海', category: 1}, {name: '北京', category: 1},
        {name: '深圳', category: 1}, {name: '广州', category: 1}, {name: '西安', category: 1}],
      links: [{source: 0, target: 1}, {source: 1, target: 2}, {source: 2, target: 0}, {source: 0, target: 3},
        {source: 0, target: 4}, {source: 0, target: 5}
      ]
    };
    let colors = getColors();
    matrix = netToMatrix(graph);

    // Compute the chord layout.
    layout.matrix(matrix);

    // Add a group per neighborhood.
    let group = svg.selectAll(".group")
      .data(layout.groups)
      .enter().append("g")
      .attr("class", "group")
      .on("mouseover", mouseover);

    // Add a mouseover title.
    group.append("title").text(function(d, i) {
      return cities[i].name + ": " + formatPercent(d.value) + " of origins";
    });

    // Add the group arc.
    let groupPath = group.append("path")
      .attr("id", function(d, i) { return "group" + i; })
      .attr("d", arc)
      .attr("fill-opacity", 0.5)
      .style("fill", function(d, i) { return colors[i % colors.length]; });


    let ary = [];
    // Add a text label.
    let groupText = group.append("text")
      .attr("x", function (d) {
        return outerRadius * (d.endAngle - d.startAngle) / 2;
      })
      .style('border', '1px solid #f00')
      .attr("dy", 15)
      .attr("transform", function(d) {
        let a = Math.PI - (d.startAngle + d.endAngle) / 2;
        let pt = [Math.sin(a) * outerRadius, Math.cos(a) * outerRadius];
        return "rotate(" + (-90) + " " + pt[0] + ", "+ pt[1] +")";
      })


      // .attr("transform", function(d) {
      //   let a = Math.PI - (d.startAngle + d.endAngle) / 2;
      //   // console.log(d);
      //   // ary.push([Math.sin(a) * outerRadius, Math.cos(a) * outerRadius]);
      //   let pt = [Math.sin(a) * outerRadius, Math.cos(a) * outerRadius];
      //   // console.log([ptx, pty]);
      //   return "rotate(" + (-90) + " " + pt[0] + ", "+ pt[1] +")";
      //   // return "rotate(" + (90) + ")"
      // })
      // .attr("transform", function(d) {
      //   return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
      //     + "translate(" + (innerRadius + 26) + ")"
      //     + (d.angle > Math.PI ? "rotate(180)" : "");
      // })
    ;

    groupText.append("textPath")
      .attr("xlink:href", function(d, i) { return "#group" + i; })
      .text(function(d, i) { return graph.nodes[i].name; });

    // Remove the labels that don't fit. :(
    groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
      .remove();

    // Add the chords.
    let chord = svg.selectAll(".chord")
      .data(layout.chords)
      .enter().append("path")
      .attr("class", "chord")
      .style("stroke", '#000')
      .style("stroke-width", '0.25px')
      .style("fill", function(d) { return colors[d.target.index % colors.length]; })
      .attr("d", path);

    // Add an elaborate mouseover title for each chord.
    chord.append("title").text(function(d) {
      let nodes = graph.nodes;
      return nodes[d.source.index].name
        + " → " + nodes[d.target.index].name
        + ": " + formatPercent(d.source.value)
        + "\n" + nodes[d.target.index].name
        + " → " + nodes[d.source.index].name
        + ": " + formatPercent(d.target.value);
    });


    // svg.append('rect').attr('x', 0).attr('y', 0)
    //   .attr('width', outerRadius).attr('height', outerRadius)
    //   .attr('fill', 'red');

    console.log(outerRadius);
    svg.append('g').selectAll('rect').data(ary).enter().append('rect')
      // .attr('r', 10)
      // .style('fill', 'red').attr('cx', (d) => d[0]).attr('cy', (d) => d[1])
      .style('fill', 'red').attr('x', (d) => d[0]).attr('y', (d) => d[1])
      .attr('width', 20).attr('height', (d, i) => 5 + i * 3)

        function mouseover(d, i) {
      chord.classed("fade", function(p) {
        return p.source.index != i && p.target.index != i;
      });
    }
  }

</script>
</body>
</html>
